<template>
  <van-steps
      class="w-full !pl-11"
      direction="vertical"
      :active="stepsActiveIndex"
  >
    <van-step
        class="timeline relative"
        v-for="(item, index) in timelineList"
        :key="index"
    >
      <div class="timeline__title">{{ item.title }}</div>
      <div>{{ item.time }}</div>
      <div>{{ item.name }}</div>

      <div class="absolute top-2.5 left-[-41px]" v-if="item.refuse">
        <van-icon name="share" class="text-red scale-x-[-1]" size="16"/>
      </div>
    </van-step>
  </van-steps>
</template>

<script lang="ts">
import {defineComponent} from "vue";
import ConsultationConstant from "./consultation-constant";

export default defineComponent({
  name: "Timeline",
  components: {},
  props: {
    info: Object,
  },
  data() {
    return {};
  },
  computed: {
    timelineList() {
      const info = this.info;
      const timelineInfo = [
        {
          show: true,
          title: "申请",
          time: info.applyDate,
          name: info.applyControlName,
        },
        {
          show: info.hasApplyQuality,
          title: "申请端质控",
          time: info.applyQualityControlTime,
          name: info.applyQualityControlName,
          refuse: info.applyQualityControlRefuse,
        },
        {
          show: info.hasDiagnosis,
          title: "前质控",
          time: info.serverQualityControlTime,
          name: info.serverQualityControlName,
          refuse: info.serverQualityControlRefuse,
        },
        {
          show: info.hasDiagnosis,
          title: "分诊",
          time: info.diagnosisTime,
          name: info.diagnosisName,
          refuse: info.diagnosisRefuse,
        },
        {
          show: true,
          title: "会诊",
          time: info.consultationTime,
          name: info.consultationName,
          refuse: info.consultationRefuse,
        },
        {
          show: info.hasDiagnosis,
          title: "后质控",
          time: info.reportQualityControlTime,
          name: info.reportQualityControlName,
          refuse: info.reportQualityControlRefuse,
        },
      ];
      return timelineInfo.filter((item) => item.show);
    },
    stepsActiveIndex() {
      const info = this.info;
      if (info.approveStep === ConsultationConstant.approveStatus.waitSubmit) {
        return 0;
      }
      if (
          info.approveStep ===
          ConsultationConstant.approveStatus.applyQualityControl
      ) {
        return 1;
      }
      if (
          info.approveStep ===
          ConsultationConstant.approveStatus.serverQualityControl
      ) {
        if (info.hasApplyQuality) {
          return 2;
        }
        return 1;
      }
      if (
          info.approveStep === ConsultationConstant.approveStatus.diagnosis ||
          info.approveStep ===
          ConsultationConstant.approveStatus.diagnosisCenter ||
          info.approveStep ===
          ConsultationConstant.approveStatus.diagnosisOrganization ||
          info.approveStep ===
          ConsultationConstant.approveStatus.diagnosisDoctorEnsure ||
          info.approveStep ===
          ConsultationConstant.approveStatus.diagnosisCenterEnsure
      ) {
        if (info.hasApplyQuality) {
          return 3;
        }
        return 2;
      }
      if (
          info.approveStep === ConsultationConstant.approveStatus.consultation
      ) {
        if (info.hasApplyQuality) {
          return 4;
        }
        if (info.hasDiagnosis) {
          return 3;
        }
        return 2;
      }
      if (
          info.approveStep ===
          ConsultationConstant.approveStatus.reportQualityControl
      ) {
        if (info.hasApplyQuality) {
          return 5;
        }
        return 4;
      }
      if (info.approveStep === ConsultationConstant.approveStatus.publish) {
        if (info.hasApplyQuality) {
          if (info.reportStatus === ConsultationConstant.reportStatus.publish) {
            return 7;
          }
          return 6;
        }
        if (info.hasDiagnosis) {
          if (info.reportStatus === ConsultationConstant.reportStatus.publish) {
            return 6;
          }
          return 5;
        }
        if (info.reportStatus === ConsultationConstant.reportStatus.publish) {
          return 4;
        }
        return 3;
      }
      return 0;
    },
  },
  watch: {},
  beforeCreate() {
  },
  created() {
  },
  beforeMount() {
  },
  mounted() {
  },
  beforeUpdate() {
  },
  updated() {
  },
  methods: {},
  beforeUnmount() {
  },
  unmounted() {
  },
});
</script>

<style scoped lang="scss">
.van-step {
  div {
    color: #969799 !important;
  }

  :deep(.van-step__line) {
    background: #ebedf0 !important;
  }

  &--finish {
    .timeline__title {
      color: #21bd0f !important;
    }

    :deep(.van-step__circle) {
      background: #21bd0f !important;
    }
  }

  &--process {
    .timeline__title {
      color: #2d5afa !important;
    }

    :deep(.van-step__circle) {
      background: #2d5afa !important;
    }
  }
}

.timeline {
  font-size: 12px;

  &__title {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 4px;
  }
}
</style>
